<template>
    <el-dialog :title="title" :visible.sync="dialogVisible" :before-close="handleClose" width="850"
        :close-on-click-modal="false">
        <div v-if="$props.type == 'meterial'">
            <el-form :inline="true">
                <el-form-item label="材料">
                    <el-select @change="meterialChange" v-model="meterialVal">
                        <el-option v-for="item in meterialList" :label="item.type" :value="item.type"
                            :key="item.type"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="series">
                    <el-select v-model="serieslVal" filterable @change="queryMeterial">
                        <el-option v-for="item in seriesList" :label="item" :value="item" :key="item"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="Specification">
                    <el-select v-model="specificationVal">
                        <el-option v-for="item in specificationList" :label="item" :value="item"
                            :key="item"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="Form">
                    <el-select v-model="formlVal">
                        <el-option v-for="item in formList" :label="item" :value="item" :key="item"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="Temper">
                    <el-select v-model="temperlVal">
                        <el-option v-for="item in temperList" :label="item" :value="item" :key="item"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="Basis">
                    <el-select v-model="basislVal">
                        <el-option v-for="item in basisList" :label="item" :value="item" :key="item"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="queryMeterialByCondition">搜索材料</el-button>
                </el-form-item>
            </el-form>
            <p>选择材料数据</p>
            <div style="width: 100%;border: 1px solid #d9d9d9;border-radius: 4px;margin-top: 5px;">
                <div style="width: 100%;padding: 5px;border-bottom: 1px solid #d9d9d9;">
                    <el-table :data="chooseMeterialList" highlight-current-row @current-change="handleSelectionChange">
                        <el-table-column show-overflow-tooltip prop="code" label="材料"></el-table-column>
                        <el-table-column show-overflow-tooltip prop="specification" label="类型"></el-table-column>
                        <el-table-column show-overflow-tooltip prop="series" label="牌号"></el-table-column>
                        <el-table-column show-overflow-tooltip prop="type" label="规范"></el-table-column>
                        <el-table-column show-overflow-tooltip prop="form" label="形式"></el-table-column>
                        <el-table-column show-overflow-tooltip prop="temper" label="热处理"></el-table-column>
                        <el-table-column show-overflow-tooltip prop="thickness" label="毛料厚度,mm"></el-table-column>
                        <el-table-column show-overflow-tooltip :prop="el" :label="titles[index]"
                            v-for="(el, index) in columns"></el-table-column>
                    </el-table>
                </div>
            </div>
        </div>
        <div v-if="$props.type == 'thinkness'">
            <el-input placeholder="请输入材料厚度" v-model="thinkness" />
        </div>
        <span slot="footer" class="dialog-footer">
            <el-button size="mini" @click="handleClose">取 消</el-button>
            <el-button size="mini" type="primary" @click="handleConfirm">确 定</el-button>
        </span>
    </el-dialog>
</template>

<script>
import { v4 as uuid } from 'uuid';
import { loadMeterialOptions, loadMeterialList } from '@/api/computingConfig.js';
export default {
    name: "FastenerMeterial",
    props: {
        type: { type: String, default: '' }
    },
    data() {
        return {
            dialogVisible: false,
            title: "选择材料",
            meterialList: [],
            seriesList: [],
            chooseMeterial: new Set(),
            chooseMeterialList: [],
            checkList: [],
            meterialVal: '',
            serieslVal: '',
            resultAttrs: new Set(),
            resultDatas: new Set(),
            resultTitles: new Set(),
            caption: null,
            specificationVal: '',
            specificationList: [],
            formlVal: '',
            formList: [],
            temperlVal: '',
            temperList: [],
            basislVal: '',
            basisList: [],
            seriesDataList: [],
            titles: [],
            columns: [],
            currentRow: null,
            thinkness:null
        };
    },
    mounted() {
        loadMeterialOptions().then(res => {
            if (res) {
                this.meterialList = res?.data || [];
            }
        })
    },
    methods: {
        show() {
            this.dialogVisible = true;
            this.thinkness = '';
            this.currentRow = null;
        },
        // 选择材料
        meterialChange(val) {
            let filterSeries = [];
            filterSeries = this.meterialList.filter(item => {
                return item.type == val
            })
            this.seriesList = filterSeries[0]?.series || [];
            this.serieslVal = '';
            this.formList = []
            this.temperList = []
            this.basisList = []
            this.specificationList = [];
            this.specificationVal = ""
            this.formlVal = ""
            this.basislVal = ""
            this.temperlVal = ""
        },
        queryMeterial() {
            // 查询数据
            this.formList = []
            this.temperList = []
            this.basisList = []
            this.specificationList = [];
            this.specificationVal = ""
            this.formlVal = ""
            this.basislVal = ""
            this.temperlVal = ""
            loadMeterialList({ series: this.serieslVal, type: this.meterialVal }).then(async (res) => {
                if (res) {
                    this.seriesDataList = res?.data.data;
                    this.titles = res?.data.titles.filter(item => { return item != '材料' && item != '牌号' && item != '类型' && item != '规范' && item != '形式' && item != '热处理' && item != '毛料厚度,mm' });
                    this.columns = res?.data.columns.filter(item => { return item != 'code' && item != 'type' && item != 'form' && item != 'temper' && item != 'thickness' && item != 'series' && item != 'specification' });
                    let specificationSet = new Set();
                    let formSet = new Set();
                    let temperSet = new Set();
                    let basisSet = new Set();
                    await this.seriesDataList.forEach(item => {
                        specificationSet.add(item.specification)
                        formSet.add(item.form)
                        temperSet.add(item.temper)
                        basisSet.add(item.basis)
                    })
                    this.specificationList = [...specificationSet]
                    this.formList = [...formSet]
                    this.temperList = [...temperSet]
                    this.basisList = [...basisSet]
                }
            })
        },
        // 条件查询材料数据
        async queryMeterialByCondition() {
            let filterData = [];
            if (this.specificationVal) {
                filterData = await this.seriesDataList.filter(item => {
                    return item.specification == this.specificationVal
                })
            }
            if (this.formlVal) {
                filterData = await filterData.filter(item => {
                    return item.form == this.formlVal
                })
            }
            if (this.temperlVal) {
                filterData = await filterData.filter(item => {
                    return item.temper == this.temperlVal
                })
            }
            if (this.basislVal) {
                filterData = await filterData.filter(item => {
                    return item.basis == this.basislVal
                })
            }
            if (filterData.length > 0) {

                this.chooseMeterialList = [...filterData]

            } else {
                this.chooseMeterialList = []
                this.$forceUpdate();
            }

        },
        async handleConfirm() {
            if(this.$props.type=='meterial'){
                this.$emit('on-close', { data: this.currentRow })
            }
            if(this.$props.type=='thinkness'){
                this.$emit('on-close', { data: this.thinkness })
            }
            this.dialogVisible = false;
        },
        handleSelectionChange(val) {
            if (val) {
                if (this.currentRow) {
                    this.currentRow = null;
                } else {
                    this.currentRow = val;
                }
            }
        },
        handleClose() {
            this.$emit('on-close', { data: null })
            this.dialogVisible = false;
        },
    },
};
</script>
<style>
.v-modal {
    z-index: 99 !important;
}
</style>